<html>
<head>
  <title>Depth of Market Summary View</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container1" style="min-width: 310px; height: 850px; margin: 0 auto; border-style: solid;"></div>

<script type='text/javascript'>

function getQueryParameter(name){
	  const parts = window.location.href.split('?');
	  if (parts.length > 1) {
	    name = encodeURIComponent(name);
	    const params = parts[1].split('&');
	    const found = params.filter(el => (el.split('=')[0] === name) && el);
	    if (found.length) return decodeURIComponent(found[0].split('=')[1]);
	  }
	}
	
	var forDate = getQueryParameter("forDate");
	var scripName = getQueryParameter("scripName");
	
	Highcharts.chart('container1', {
	  chart: {
	    type: 'spline'
	  },
	  title: {
	    text: scripName + ' DOM Summary Chart'
	  },
	  subtitle: {
	    text: 'DOM ' + forDate
	  },
	  yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}'
        },
        opposite: true,
        title: {
            text: 'LTP'
        }
    }, { // Secondary yAxis
        gridLineWidth: 0,
        
        labels: {
            format: '{value}'
        },title: {
            text: 'Total'
        }
    }, { // Third yAxis
        gridLineWidth: 0,
        
        labels: {
            format: '{value}'
        },title: {
            text: 'Diff'
        }
    }],
	  data: {
	    csvURL: 'http://localhost/portal/chart/DOMSummaryQuote?forDate='+forDate+ '&scripName='+scripName,
	    enablePolling: true,
	    dataRefreshRate: 60
	  },
	  series: [
		  { yAxis: 0},{ yAxis: 1},{ yAxis: 1}, {yAxis: 2}
		 ]
	});
  </script>
</body>
</html>